<template>
    <div class="home">
        <div class="top">
            <div class="sumBox box">
                <div class="anMax">
                    <span class="name">案件总数</span>
                    <b>50件</b>
                </div>
                <div class="f">
                    <div class="f1">
                        <span class="name">办理中</span>
                        <b>30件</b>
                    </div>
                    <div class="f2">
                        <span class="name">重大执法案件</span>
                        <b>20件</b>
                    </div>
                </div>
            </div>
            <div class="notice box">
                <div class="title">通知公告</div>
                <div class="cont">
                    <ul>
                        <template v-for="(item, index) in noticeList">
                            <li :key="index"><a href="#">{{item.title}}</a><span>{{item.time}}</span></li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>
        <div class="box notice" style="margin-top: 20px;">
            <div class="title">案件来源</div>
            <div class="cont" id="line" style="height: 400px"></div>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src
import LineOption from '@/views/LineOption'
export default {
    name: 'Home',
    data () {
        return {
            noticeList: [{
                title: '忻州市人民政府办公室关于印发《忻州市公共场所禁止随地吐痰的实施细则》的通知',
                time: '2020-08-26'
            }, {
                title: '新建雄安新区至忻州高速铁路环境影响评价第一次信息公告',
                time: '2020-08-25'
            }, {
                title: '关于参加2020年山西省人民政府履行教育职责情况满意度调查的公告',
                time: '2020-08-20'
            }, {
                title: '关于首届忻州市标准化突出贡献奖获奖建议名单的公示',
                time: '2020-07-30'
            }, {
                title: '致市民朋友的一封信',
                time: '2020-07-14'
            }, {
                title: '忻州市防汛抗旱指挥部防汛安全避险通告',
                time: '2020-07-03'
            }],
            lineBox: ''
        }
    },
    mounted () {
        this.lineBox = this.$echarts.init(document.getElementById('line'))
        this.drawLine()
    },
    methods: {
        drawLine: function () {
            this.lineBox.setOption(LineOption)
        }
    }
}
</script>

<style lang="less" scoped>
@themeColor: #0848AA;
.home {
    padding: 20px;
    .top {
        display: flex; justify-content: space-between;
    }
    .box {
        padding: 20px; background: #FFFFFF; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    }
    .sumBox {
        margin-right: 20px; flex: 2;
        .name {
            font-size: 24px; color: rgba(0,0,0,0.5); line-height: 60px;
        }
        .anMax {
            display: flex; align-items: center; flex-wrap: wrap; justify-content: center; border-bottom: 1px rgba(0,0,0,0.1) solid; padding-bottom: 20px;
            b {
                font-size: 38px; font-weight: bold; color: @themeColor; flex: none; width: 100%; text-align: center;
            }
        }
        .f {
            display: flex; align-items: center; flex-wrap: wrap; padding-top: 20px;
            .f1,.f2 {
                flex: 1; text-align: center;
            }
            b {
                font-size: 32px; font-weight: bold; display: block;
            }
        }
    }
    .notice {
        flex: 3;
        .title {
            font-size: 18px; color: @themeColor; padding-bottom: 20px; border-bottom: 1px rgba(0,0,0,0.1) solid;
        }
        .cont {
            ul {
                li {
                    line-height: 36px; height: 36px; display: flex; justify-content: space-between; align-items: center;
                    a {
                        text-decoration: none; color: rgba(0,0,0,0.7); font-size: 16px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                        &:hover {
                            color: @themeColor; text-decoration: underline;
                        }
                    }
                    span {
                        font-size: 16px; color: rgba(0,0,0,0.7);
                        margin-left: 15px;
                    }
                }
            }
        }
    }
}
</style>
